<template>
  <div class="style-config">
    <el-form label-width="120px" class="sub-form">
      <!-- 背景颜色 -->
      <el-form-item label="背景颜色">
        <el-color-picker v-model="style.backgroundColor" @change="onStyleChange" />
      </el-form-item>
      
      <!-- 字体颜色 -->
      <el-form-item label="字体颜色">
        <el-color-picker v-model="style.fontColor" @change="onStyleChange" />
      </el-form-item>
      
      <!-- 字体大小 -->
      <el-form-item label="字体大小">
        <el-input-number 
          v-model="style.fontSize" 
          :min="10" 
          :max="24" 
          @change="onStyleChange" 
        />
      </el-form-item>
      
      <!-- 节点高度 -->
      <el-form-item label="节点高度">
        <el-input-number 
          v-model="style.height" 
          :min="60" 
          :max="200" 
          @change="onStyleChange" 
        />
      </el-form-item>
      
      <!-- 节点宽度 -->
      <el-form-item label="节点宽度">
        <el-input-number 
          v-model="style.width" 
          :min="100" 
          :max="300" 
          @change="onStyleChange" 
        />
      </el-form-item>
      
      <!-- 节点图标 -->
      <el-form-item label="节点图标">
        <el-select v-model="style.icon" @change="onStyleChange" placeholder="选择图标">
          <el-option label="无图标" value="" />
          <el-option label="齿轮" value="⚙" />
          <el-option label="文档" value="📄" />
          <el-option label="脚本" value="📜" />
          <el-option label="用户" value="👤" />
          <el-option label="邮件" value="📧" />
          <el-option label="流程" value="🔄" />
          <el-option label="开始" value="▶" />
          <el-option label="结束" value="⏹" />
          <el-option label="网关" value="◇" />
          <el-option label="任务" value="📋" />
          <el-option label="设置" value="⚙️" />
          <el-option label="通知" value="🔔" />
          <el-option label="检查" value="✅" />
          <el-option label="警告" value="⚠️" />
          <el-option label="错误" value="❌" />
        </el-select>
      </el-form-item>
      
      <!-- 边框样式 -->
      <el-form-item label="边框样式">
        <el-select v-model="style.borderStyle" @change="onStyleChange">
          <el-option label="实线" value="solid" />
          <el-option label="虚线" value="dashed" />
          <el-option label="点线" value="dotted" />
        </el-select>
      </el-form-item>
      
      <!-- 边框宽度 -->
      <el-form-item label="边框宽度">
        <el-input-number 
          v-model="style.borderWidth" 
          :min="1" 
          :max="10" 
          @change="onStyleChange" 
        />
      </el-form-item>
      
      <!-- 边框颜色 -->
      <el-form-item label="边框颜色">
        <el-color-picker v-model="style.borderColor" @change="onStyleChange" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  style: {
    type: Object,
    default: () => ({
      backgroundColor: '#1890ff',
      fontColor: '#ffffff',
      fontSize: 14,
      height: 80,
      width: 140,
      icon: '',
      borderStyle: 'solid',
      borderWidth: 3,
      borderColor: '#ffffff'
    })
  }
})

const emit = defineEmits(['change'])

const style = ref({ ...props.style })

watch(style, (newVal) => {
  emit('change', newVal)
}, { deep: true })

function onStyleChange() {
  emit('change', style.value)
}
</script>

<style scoped>
.style-config {
  width: 100%;
}

.sub-form .el-form-item {
  margin-bottom: 12px;
}
</style> 